<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 13:41:16
-->
<template>
  <div class="page-warp">
    <div class="page-container">
      <div class="page-item animate__animated" @click="onHome" @mouseover="addBounce" @mouseleave="removeBounce">
        商贸物流
      </div>
      <div class="page-item animate__animated" @click="onInOut" @mouseover="addBounce" @mouseleave="removeBounce">
        数字货运
      </div>
      <div class="page-item animate__animated" @click="onInternet" @mouseover="addBounce" @mouseleave="removeBounce">
        智慧园区
      </div>
      <div class="page-item animate__animated" @click="onCar" @mouseover="addBounce" @mouseleave="removeBounce">
        运输车辆
      </div>
      <div class="page-item animate__animated" @click="onPack" @mouseover="addBounce" @mouseleave="removeBounce">
        国际贸易
      </div>
      <div class="page-item animate__animated" @click="onAvator" @mouseover="addBounce" @mouseleave="removeBounce">
        数据应用
      </div>
      <div class="page-item animate__animated" @click="onLayout" @mouseover="addBounce" @mouseleave="removeBounce">
        老系统
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      cursor: '<!-- 自定义内容 -->',
    };
  },
  methods: {
    addBounce(event) {
      event.target.classList.add('animate__bounce');
    },
    removeBounce(event) {
      event.target.classList.remove('animate__bounce');
    },
    onLayout() {
      this.$router.push('/layout/index');
    },
    onHome() {
      this.$store.state.setting.pageNo = 0;
      this.$router.push('/launch/index');
    },
    onInOut() {
      this.$store.state.setting.pageNo = 1;
      this.$router.push('/launch/inout');
    },
    onInternet() {
      this.$store.state.setting.pageNo = 2;
      this.$router.push('/launch/internet');
    },
    onCar() {
      this.$store.state.setting.pageNo = 3;
      this.$router.push('/launch/car');
    },
    onPack() {
      this.$store.state.setting.pageNo = 4;
      this.$router.push('/launch/pack');
    },
    onAvator() {
      this.$store.state.setting.pageNo = 5;
      this.$router.push('/launch/avator');
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~hover.css/css/hover.css';
@import '~animate.css/animate.css';

.page-warp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;

  .page-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 650px;
    height: 450px;

    // border: 1px solid silver;
    .page-item {
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      color: rgba(255, 255, 255, 0.4);
      font-size: 30px;
      cursor: pointer;

      border: 1px dashed rgba(255, 255, 255, 0.2);

      &:hover {
        color: rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 6px 6px rgba(255, 255, 255, 0.2);
      }
    }
  }
}
</style>
